<template>
  <div id="app">
    <Child :title="msg" @child-click="handlerChildClick"/>
    <ToDoList v-on:add-list="addList" @remove-all="removeAll" />
    <div class="box">
      <h2>这里是待办清单</h2>
      <ul v-for="(item,index) in listData" :key="index">
        <li>{{index+1}}---{{item}}</li>
      </ul>
    </div>
  </div>
</template>

<script>
import {ref} from "vue";
import Child from "./components/Child.vue";
import ToDoList from "./components/ToDoList.vue";
export default {
  components: { Child ,ToDoList },
  setup() {
    const msg=ref("我是父组件的值");
    const listData = ref([]);
    const handlerChildClick=msg=>{
      alert(msg);
    };
    const addList= value =>{
      console.log(value);
      listData.value.push(value);
    };
    const removeAll=()=>{
      listData.value = [];
    };
    return{
      msg,
      handlerChildClick,
      addList,
      removeAll,
      listData
    };
  }
};
</script>

<style>
  .box{
    width: 400px;
    height: 500px;
    background-color: blanchedalmond;
  }
</style>